<template>
  <div class="counter-container">
    <!-- 数量 -1 按钮 -->
    <button type="button" class="btn btn-light btn-sm" @click="onSubClick">-</button>
    <!-- 输入框 -->
    <input type="number" class="form-control form-control-sm ipt-num" v-model.number.lazy="number" />
    <!-- 数量 +1 按钮 -->
    <button type="button" class="btn btn-light btn-sm" @click="onAddClick">+</button>
  </div>
</template>
<script>
export default {
  name: 'EsCounter',
  watch: {
    number(newVal) {  // 监听 number 数值的变化
      const parseResult = parseInt(newVal)  // 1. 将输入的新值转化为整数
      if (isNaN(parseResult) || parseResult < 1) {  // 2. 如果转换的结果不是数字，或小于1，则强制 number 的值等于1
        this.number = 1
        return
      }
      if (String(newVal).indexOf('.') !== -1) { // 3. 如果新值为小数，则把转换的结果赋值给 number
        this.number = parseResult
        return
      }
      console.log(this.number)
      // 触发自定义事件，把最新的 number 数值传递给组件的使用者
      this.$emit('numChange', this.number)
    },
  },
  props: {
    num: {   // 初始数量值【只读数据】
      type: Number,
      default: 0,
    },
    props: {
      num: {  // 数量值
        type: Number,
        default: 0,
      },
      min: {  // 最小值
        type: Number,
        default: NaN, // min 属性的值默认为 NaN，表示不限制最小值
      },
    },
  },
  data() {
    return {
      // 内部状态值【可读可写的数据】，通过 this 可以访问到 props 中的初始值
      number: this.num,
    }
  },
  methods: {
    onSubClick() {  // -1 按钮的事件处理函数
      // 判断条件：min 的值存在，且 number - 1 之后小于 min
      if (!isNaN(this.min) && this.number - 1 < this.min) return
      this.number -= 1
    },
    onAddClick() {  // +1 按钮的事件处理函数
      this.number += 1
    },
    // getNumber(num) {  // 监听数量变化的事件
    //   // 触发自定义事件，向外传递数据对象 { id, value }
    //   this.$emit('countChange', {
    //     id: this.id,  // 商品的 id
    //     value: num, // 最新的数量
    //   })
    // },
  },
  emits: ['numChange'],
}
</script>
<style lang="less" scoped>
.counter-container {
  display: flex;
  .btn {  /* 按钮的样式 */
    width: 25px;
  }
  .ipt-num {  /* 输入框的样式 */
    width: 34px;
    text-align: center;
    margin: 0 4px;
  }
}
</style>